<template>
  <div class="page">
    <vs-row justify="center">
      <vs-col :w="mobile">
        <!-- <div class="test">{{ filename }} || {{ user }} || {{ style }}</div> -->
        <file-pond
          v-if="step >= 1"
          class="fileupload"
          name="upload"
          ref="pond"
          label-idle="拖放或点击需要AI处理的图片..."
          v-bind:allow-multiple="false"
          accepted-file-types="image/jpeg, image/png"
          :server="server"
          v-on:init="handleFilePondInit"
          v-on:removefile="handleMovefile"
          v-on:processfile="handleProcessfile"
        />

        <vs-card-group class="card" v-if="step >= 2">
          <vs-card
            type="5"
            v-for="card in styles"
            @click="handleClick(card.style, card.name)"
            :key="card._id"
          >
            <template #title>
              <h3>{{ card.name }}</h3>
            </template>
            <template #img>
              <img :src="`${serverURL}/${card.style}`" alt="" />
            </template>
            <template #text>
              <p>{{ card.style }}</p>
            </template>
            <template #interactions>
              <vs-button
                :disabled="card.style !== style"
                :danger="card.style == style"
                icon
              >
                <i
                  class="bx"
                  :class="card.style == style ? 'bx-check-square' : 'bx-square'"
                ></i>
              </vs-button>
            </template>
          </vs-card>
        </vs-card-group>
        <div class="but-panel" v-if="step >= 3">
          <vs-button active @click="publishClick" class="button">
            <i class="bx bx-cloud-upload"></i>
            &nbsp;发布任务
          </vs-button>
        </div>
      </vs-col>
    </vs-row>
  </div>
</template>

<script>
// Import Vue FilePond
import vueFilePond from "vue-filepond";

// Import FilePond styles
import "filepond/dist/filepond.min.css";
// Import FilePond plugins
// Please note that you need to install these plugins separately

// Import image preview plugin styles
import "filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css";

// Import image preview and file type validation plugins
import FilePondPluginFileValidateType from "filepond-plugin-file-validate-type";
import FilePondPluginImagePreview from "filepond-plugin-image-preview";

// Create component
const FilePond = vueFilePond(
  FilePondPluginFileValidateType,
  FilePondPluginImagePreview
);

import { mapState } from "vuex";
import { style, task } from "@/api/user";

export default {
  name: "task",
  components: {
    FilePond,
  },
  data() {
    return {
      mobile: 7,
      step: 1,
      filename: "",
      style: "",
      stylename: "",
      styles: [],
      serverURL: process.env.VUE_APP_BASE_API + "/thumbnail",
      server: {
        url: process.env.VUE_APP_BASE_API,
        process: {
          url: "/upload",
          method: "POST",
          withCredentials: false,
        },
        revert: {
          url: "/upload",
          method: "DELETE",
          withCredentials: false,
        },
      },
    };
  },
  computed: mapState(["user", "username"]),
  methods: {
    // 发布任务
    async publishClick() {
      if (!this.filename || !this.style || !this.user) {
        this.openNotification("参数不足，请重新选择处理的图片和模板");
        return;
      }
      const res = await task({
        name: this.filename,
        style: this.style,
        stylename: this.stylename,
        user: this.user,
      });
      if (res.data && res.data.status) {
        // console.log(res.data);
        this.step = 1;
        this.$refs.pond.removeFile();
        this.filename = "";
        this.style = "";
        this.$store.commit("latest", new Date().getTime());
        this.openSuccessful("AI图形处理添加成功，等待处理完成");
      } else {
        this.openNotification(res.data.message);
      }
    },
    handleClick(style, stylename) {
      if (this.style == style) {
        this.style = "";
        this.stylename = "";
        this.step--;
      } else {
        this.style = style;
        this.stylename = stylename;
        this.step = 3;
        this.openSuccessful("第三步，点击按钮提交");
      }
    },
    handleMovefile: function () {
      this.filename = "";
    },
    handleProcessfile: function (err, file) {
      this.filename = file.serverId;
      this.step++;
      this.openSuccessful("第二步，选择AI绘画风格");
    },

    handleFilePondInit: function () {
      // console.log("FilePond has initialized");
    },
    // 初始化方法，调用样式列表
    init: async function () {
      const res = await style();
      if (res.data.status) {
        this.styles = res.data.data;
      }
      this.openSuccessful("第一步，选择需要处理的图片");
    },

    openSuccessful(title) {
      this.$vs.notification({
        progress: "auto",
        icon: "<i class='bx bx-select-multiple' ></i>",
        color: "success",
        position: "top-center",
        title: title,
      });
    },
    openNotification(title) {
      this.$vs.notification({
        progress: "auto",
        icon: "<i class='bx bxs-error' ></i>",
        color: "danger",
        position: "top-right",
        title: title,
      });
    },
    isMobile() {
      let flag = navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      );
      return flag;
    },
  },
  mounted() {
    this.init();
    this.$store.commit("latest", new Date().getTime());
    this.mobile = this.isMobile() ? 12 : 7;
  },
};
</script>

<style scoped lang="stylus">
.card{
  width : 100%;
}
.page {
  display: flex;
  align-items: center;
  min-height: 90vh;
  width: 100%;
  span {
    width: 100%;
  }
}
.fileupload{
  width : 15vw;
  height: 15vw;
  margin: 0 auto;
}
@media all and (orientation : portrait){
  .fileupload{
    width : 70vw;
    height: 70vw;
    margin: 0 auto;
  }
}
.test{
  color: #fff;
}
.but-panel {
  text-align: center;
  width :100%;
  margin: 30px 0;
  button{
    margin: 0 auto;
    width: 200px;
  }
}
.card .vs-card__group-cards{
  width: 100%;
}
.card .vs-card__group .vs-card__group-cards .vs-card-content{
  min-width: 220px;
}
</style>
